
import {useEffect, useState} from 'react'


/**
 * useEffect的概念理解：
 *    useEffect是一个React Hook函数，用于在React组件中创建不是由
 *    事件引起而是 由渲染本身引起的操作， 比如发送Ajax请求，更改DOM等
 * 
 *   说明:
 *     上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器
 *      要数据，整个过程属于“只由渲染引起的操作”
 * 
 * 
 *    useEffect(()=>{},[])
 *    参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作   -> 相当于回调函数
 *    参数2是一个数组(可选)，在数组里放置依赖项，不同依赖项会影响第一个参数的执行
 *    当是一个空数组是时，副作用函数只会在组件渲染完毕之后执行一次
 */


const URL = 'http://geek.itheima.net/v1_0/channels'



function App() {
  const[list,setList]=useState([])
  useEffect(()=>{
    async function getList(){
       const res = await fetch(URL)
       const resJson = await res.json()
       console.log(resJson)
       setList(resJson.data.channels)
    }
    getList()
  },[])


  return (
    <div>
      this is App
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App;
